<template>
  <div class="app">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in recommendLunbo" :key="index">
        <img :src="item.src" alt="" />
      </van-swipe-item>
    </van-swipe>

    <div class="introduce">
      <span class="sell_price">¥{{ recommendData.sell_price }}</span>
      <s class="market_price">¥{{ recommendData.market_price }}</s>
      <div class="title">{{ recommendData.title }}</div>
    </div>

    <div class="content" v-html="recommendData.content"></div>

    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :message-config="messageConfig"
    />

    <van-goods-action class="goodsAction">
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="showGouWu"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { recommendDetails, recommendDetailslunbo } from "@/api/recommend.js";

export default {
  data() {
    return {
      recommendLunbo: "",
      recommendData: "",

      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "https://img01.yzcdn.cn/1.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "https://img01.yzcdn.cn/1p.jpg", // 用于预览显示的规格类目图片
              },
              {
                id: "1",
                name: "蓝色",
                imgUrl: "https://img01.yzcdn.cn/2.jpg",
                previewImgUrl: "https://img01.yzcdn.cn/2p.jpg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
            extraDesc: "", // 可选值，附加描述文案
          },
        ],
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        picture: "https://img01.yzcdn.cn/1.jpg",
        // 数据结构见下方文档
      },
      messageConfig: {
        // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
        uploadImg: () => {
          return new Promise((resolve) => {
            setTimeout(
              () =>
                resolve(
                  "https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg"
                ),
              1000
            );
          });
        },
        // 可选项，自定义图片上传逻辑，使用此选项时，会禁用原生图片选择
        customUpload: () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve("https://img01.yzcdn.cn/vant/leaf.jpg");
            }, 1000);
          });
        },
        // 最大上传体积 (MB)
        uploadMaxSize: 3,
        // placeholder 配置
        placeholderMap: {
          text: "xxx",
          tel: "xxx",
        },
        // 初始留言信息
        // 键：留言 name
        // 值：留言内容
        initialMessages: {
          liuyan: "留言信息",
        },
        // 数据结构见下方文档
      },
    };
  },
  methods: {
    async recommendlunbo() {
      let { data } = await recommendDetailslunbo(this.$route.query.id);
      this.recommendLunbo = data.message;
    },
    async recommendAxios() {
      let { data } = await recommendDetails(this.$route.query.id);
      this.recommendData = data.message;
    },
    showGouWu(){
      this.show = true
    }
  },
  created() {
    this.recommendlunbo();
    this.recommendAxios();
  },
};
</script>

<style lang="scss" scoped>
$ui-width: 720;
$num: 15;
$baseFontSize: 50; // 750 / 15
@function px2rem($px) {
  @return $px / $baseFontSize + rem;
}
.app {
  background-color: #eee9e9;
  padding: 10px;
  div {
    background-color: white;
    margin-top: 10px;
    border-radius: 10px;
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  background-color: #ffffff;
  max-width: 750px;
  min-width: 320px;
  height: px2rem(280);
  display: flex;
  justify-content: center;
  img {
    height: 100%;
  }
}

.introduce {
  display: flex;
  flex-wrap: wrap;
  padding: 4px;
  .sell_price {
    color: #fa865d;
    font-size: px2rem(24);
  }
  .market_price {
    color: #666666;
    font-size: px2rem(18);
    margin-left: px2rem(20);
    margin-top: px2rem(6);
  }
  .title {
    font-size: px2rem(20);
    width: 100%;
  }
}

.content {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  font-size: px2rem(16);
  // ::v-deep深度选择器
  ::v-deep .gomeImgLoad {
    width: 100%;
  }
}
.goodsAction {
  width: 100%;
  // 让wdith 100% 最大不能超过750px , 最小不能小于320px
  min-width: px2rem(320);
  max-width: px2rem(750);
  /* 居中 */
  left: 50%;
  transform: translateX(-50%);
}
</style>